@import "./../theme";
@import "./../var";

$table-cell-padding: 5px;
.renderer-table {
  position: relative;

  .header-opt-bar {
    margin-bottom: 0.5rem;
    .el-button{
      margin-right: 0.5rem;
    }
  }

  .max-limit-tip {
    color: $colorTextInfo;
    font-size: $fontSizeSmall;
    margin-left: 1rem;
  }

  .el-table__fixed-header-wrapper, .el-table__header-wrapper {
    background: $bgColorSecondary;

    .el-table__header {
      .el-table__cell {
        padding: 0 !important;
        color: $colorTextSecondary !important;
        font-weight: normal !important;
        font-size: $fontSizeRegular;
      }

      th {
        .cell.required::before {
          content: '*' !important;
          color: $colorDanger;
          margin-right: 0.25rem !important;
          background: transparent !important;
          vertical-align: top !important;
        }
      }
    }
  }

  .el-table__fixed-body-wrapper, .el-table__body-wrapper {
    .el-table__cell {
      padding: $table-cell-padding 0 !important;
      color: $colorTextSecondary !important;
      font-weight: normal !important;
      font-size: $fontSizeRegular;

      & > .cell {
        padding: 0 $table-cell-padding !important;
      }
    }
  }

  td.el-table__cell {
    border-bottom: 0;
  }

  .el-table__empty-block {
    min-height: 50px;
  }

  .scope-action {
    display: none;
  }

  .scope-index {
    display: block;
  }

  .hover-row {
    .scope-action {
      display: block;

      .el-button {
        padding: 4px;
      }
    }

    .scope-index {
      display: none;
    }
  }

  .renderer-table-pc {
    display: block;

    .renderer-table-delete {
      color: $colorTextSecondary;

      &:hover {
        color: $colorDanger;
      }
    }

    .el-form-item {
      margin-bottom: 0 !important;
      position: relative;

      .el-form-item__error {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1rem;
        top: auto;
        color: $colorTextInverse;
        background: fade-out($colorDanger, 0.2);
        padding: 0 0.4rem;
        line-height: 1rem;
        border-radius: $radiusSmall;
      }
    }
  }

  .renderer-table-mobile {
    border: none !important;

    .renderer-table-mobile-item {
      border: 1px solid $borderColorLight;
      margin-bottom: 5px;
      border-radius: $radiusRegular !important;
      overflow: hidden;

      .el-collapse-item__header {
        background: $bgColorSecondary;
        height: 2rem;
        line-height: 2rem;
        border-top: none !important;
        border-bottom: none !important;

        &.is-active {
          border-bottom: 1px solid $borderColorLight !important;
        }
      }

      .el-collapse-item__content {
        border-bottom: none !important;
        padding: 0.3rem 0.3rem 0 !important;
      }

      .el-collapse-item__wrap {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }

      .renderer-table-mobile-item-top {
        padding: 0 1rem;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;

        .renderer-table-mobile-delete {
          color: $colorTextSecondary;

          &:hover {
            color: $colorDanger;
          }
        }
        .renderer-table-mobile-title{
          @include text-ellipsis
        }
      }

      .renderer-table-mobile-item-content {
        padding: 0.3rem;
      }
    }
  }

  .btn-new-data {
    margin: 0.5rem 0;
    padding: 0.4rem 2rem;
    width: 100%;
    color: $colorPrimary;

    &.is-short {
      width: 4rem;
      padding: 0.4rem 0;
      font-size: $fontSizeRegular;
    }
  }

  .pagination-data {
    margin: 0.5rem 0;
    float: right;
  }

  .print-read-mode {
    .el-form-item__label {
      color: $colorTextSecondary;
    }

    .el-input-number {
      .el-input__inner {
        //text-align: left;
        padding-left: 0;
      }
    }

    .is-disabled {
      .el-input__suffix, .el-input__prefix {
        display: none;
      }

      .el-input__inner, .el-textarea__inner {
        cursor: text !important;
        background-color: transparent !important;
        border-color: transparent !important;
        color: $colorTextPrimary;
        resize: none;
        padding-left: 0;
        // 谷歌
        &::-webkit-input-placeholder {
          color: transparent;
        }

        // 火狐19+版本
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: transparent;
        }

        // 火狐4-18版本
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: transparent;
        }

        // IE10-11版本
        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
          color: transparent;
        }
      }
    }
  }
}

.renderer-grid-row {
  flex-wrap: wrap !important;
}
